<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta content="text/html;charset=utf-8" http-equiv="content-type">
  <meta content="text/html;charset=utf-8" http-equiv="content-type">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

  <title>滑雪族 - 对账列表</title>

  <!-- Bootstrap Core CSS -->
<!-- MetisMenu CSS -->
<!-- Custom CSS -->
<!-- Custom Fonts -->
  <!-- Timeline CSS -->
  <!-- Morris Charts CSS -->  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->


    <link rel="stylesheet" href="/server/r/bower_components/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/server/r/bower_components/metisMenu/dist/metisMenu.min.css" />
    <link rel="stylesheet" href="/server/r/static/css/sb-admin-2_e507c2b.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/font-awesome/css/font-awesome.min.css" />
    <link type="text/css" rel="stylesheet" href="/server/r/static/css/hxz/common_2baa698.css" />
    <link rel="stylesheet" href="/server/r/static/css/timeline_1c13c9f.css" />
    <link rel="stylesheet" href="/server/r/bower_components/morrisjs/morris.css" />
    <link type="text/css" rel="stylesheet" href="/server/r/bower_components/select2/dist/css/select2.min.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/alertify/themes/alertify.core.css" />
    <link rel="stylesheet" type="text/css" href="/server/r/bower_components/alertify/themes/alertify.bootstrap.css" />
    <link rel="stylesheet" href="/server/r/bower_components/bootstrap-daterangepicker/daterangepicker.css" />
</head>

<body>
<div id="wrapper">
  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">

    <div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="activity-list">滑雪族 管理</a>
</div>
<!-- /.navbar-header -->

<ul class="nav navbar-top-links navbar-right">
  <!-- /.dropdown -->
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
    </a>
    <ul class="dropdown-menu dropdown-user">
      <li><a href="/manage/logout"><i class="fa fa-sign-out fa-fw"></i> 退出系统</a>
      </li>
    </ul>
    <!-- /.dropdown-user -->
  </li>
  <!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->

    <div class="navbar-default sidebar" role="navigation">
      <div class="sidebar-nav navbar-collapse">
        <ul class="nav" id="side-menu">
  <li>
    <a href="#"><i class="fa fa-asterisk fa-fw"></i> 产品管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/activity-list"> 产品查询</a>
      </li>
      <li>
        <a href="/manage/manage-organizer-render-activity"> 产品显示控制</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="/#"><i class="fa fa-male fa-fw"></i> 报名管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/player-list"> 报名查询</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-list-alt fa-fw"></i> 订单管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/order-list"> 订单查询</a>
      </li>
      <li>
        <a href="/manage/refund-list"> 退款管理</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-check-circle fa-fw"></i> 主办方认证<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/organizer-edit"> 创建主办方</a>
      </li>
      <li>
        <a href="/manage/organizer-list"> 主办方列表</a>
      </li>
      <li>
        <a href="/manage/organizer-print"> 冬令营打印设置</a>
      </li>

    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-picture-o fa-fw"></i> 雪场管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/ski-field-edit"> 创建雪场</a>
      </li>
      <li>
        <a href="/manage/ski-field-list"> 雪场列表</a>
      </li>

    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-users fa-fw"></i> 教练管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/coach-list"> 预约情况</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-credit-card fa-fw"></i> 结算管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/manage-transfer-list"> 转账管理</a>
      </li>
      <li>
        <a href="/manage/manage-withdrawals-apply-list"> 提现申请</a>
      </li>
      <li>
        <a href="/manage/manage-withdrawals-record-list"> 结算列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-rmb fa-fw"></i> 财务管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/stream-list"> 交易流水</a>
      </li>
      <li>
        <a href="/manage/manage-bill-record-list"> 对账列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-dollar fa-fw"></i> 营销管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/marketing-list"> 返利管理</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-comments fa-fw"></i> 评价管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/comment-list">评价管理</a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#"><i class="fa fa-tasks fa-fw"></i> 定时处理管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/quartz-list"> 定时处理列表</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
  <li>
    <a href="#"><i class="fa fa-wechat fa-fw"></i> 微信页面管理<span class="fa arrow"></span></a>
    <ul class="nav nav-second-level">
      <li>
        <a href="/manage/typography-list"> 微信首页管理</a>
      </li>
      <li>
        <a href="/manage/activity-weight-manage"> 活动置顶</a>
      </li>
    </ul>
    <!-- /.nav-second-level -->
  </li>
</ul>
      </div>
      <!-- /.sidebar-collapse -->
    </div>
    <!-- /.navbar-static-side -->
  </nav>

  <div id="page-wrapper">
    <div class="row">
      <div class="col-lg-12">
        <h3 class="page-header">对账列表</h3>
      </div>
      <!-- /.col-lg-12 -->
    </div>


    <div class="form-inline">
      <div class="form-group">
        <label>账单日期：</label>

        <div class="input-group" id="start-date">
          <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
          </span>
          <input type="text" class="form-control input-sm" readonly placeholder="请选择查询区间起点" style="width: 200px;">
        </div>

        <a id="search" type="button" class="btn btn-sm btn-success btn-outline" style="margin-left: 10px;">查询</a>
      </div>
      <input type="hidden" id="start-time" name="startTime">

      <div class="form-group">
        <label>筛选：</label>
      </div>
      <div class="form-group">
        <a id="play-filter-all" type="button" class="btn btn-sm btn-success btn-outline">全部</a>
        <a id="play-filter-0" type="button" class="btn btn-sm btn-success btn-outline">下载失败</a>
        <a id="play-filter-1" type="button" class="btn btn-sm btn-success btn-outline">处理中</a>
        <a id="play-filter-2" type="button" class="btn btn-sm btn-success btn-outline">对账成功</a>
        <a id="play-filter-3" type="button" class="btn btn-sm btn-success btn-outline">对账失败</a>
        <a id="play-filter-4" type="button" class="btn btn-sm btn-success btn-outline">不存在</a>
      </div>
    </div>

    <!-- /.row -->
    <div class="row">
      <div class="col-lg-12">
        <div class="panel panel-default">
          <div class="panel-heading">
            对账列表
          </div>
          <!-- /.panel-heading -->
          <div class="panel-body">
            <div class="dataTable_wrapper">
              <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr class="warning">
                  <th>序号</th>
                  <th>对账类型</th>
                  <th>对账日期</th>
                  <th>总交易单数</th>
                  <th>总交易额</th>
                  <th>总退款金额</th>
                  <th>总代金券或<br/>立减优惠退款金额</th>
                  <th>手续费总金额</th>
                  <th>多次下载</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
                </thead>
                <tbody id="activity-list-body"></tbody>
              </table>
            </div>

            <!-- /.row -->
            <div class="pagination dataTables_paginate paging_simple_numbers pull-right" id="pagination" role="status"
                 aria-live="polite">
            </div>

          </div>
          <!-- /.panel-body -->
        </div>
        <!-- /.panel -->
      </div>
      <!-- /.col-lg-12 -->
    </div>
  </div>
  <!-- /#page-wrapper -->

</div>
<!-- /#wrapper --><script id="tpl-activity-list-item" type="text/template">
  <tr>
    <td>{{index}}</td>
    <td>{{billtype}}</td>
    <td>{{billdate}}</td>
    <td>{{totalCount}}</td>
    <td>{{totalPayFee}}</td>
    <td>{{totalRefundFee}}</td>
    <td>{{totalPacketrefundFee}}</td>
    <td>{{totalChargeFee}}</td>
    <td>{{retryTimes}}</td>
    <td>{{billStatus(status)}}</td>
    <td>
      <%
      if (status == 0 || status == 3 || status == 4) {
      %>
      <!--//状态 0 下载失败 1处理中 2 对账成功 3 对账失败 4 不存在-->
      <!--<a type="button" class="btn btn-danger btn-xs" data-bill-id="{{billId}}">更新</a>-->
      <%
        }
      %>
      <a href="/manage/manage-bill-detail-list?billtype={{billtype}}&&billdate={{billdate}}" type="button"
         class="btn btn-info btn-xs"
         data-bill-id="{{billId}}">查看详情</a>
    </td>
  </tr>
</script>

<!-- Modal -->
<div class="modal fade" id="activity-preview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">产品手机版二维码</h4>
      </div>
      <div class="modal-body" style="padding-left: 145px;">
        <img src="/server/r/static/images/qrcode.png" style="width: 300px;height: 300px;">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<div id="hxz-background" class="background" style="display: none; "></div>
<div id="hxz-progressBar" class="progressBar" style="display: none; ">数据加载中，请稍等...</div>

<script src="/server/r/require.js"></script>
<script type="text/javascript">/*resourcemap*/
require.config({paths:{
  "r/bower_components/jquery/dist/jquery.min": "/server/r/bower_components/jquery/dist/jquery.min",
  "r/bower_components/underscore/underscore-min": "/server/r/bower_components/underscore/underscore-min",
  "r/static/js/hxz/hxz.valid": "/server/r/static/js/hxz/hxz.valid_12cc206",
  "r/static/js/hxz/hxz.rest": "/server/r/static/js/hxz/hxz.rest_07c8105",
  "r/bower_components/alertify/alertify.min": "/server/r/bower_components/alertify/alertify.min",
  "r/static/js/alertify-config": "/server/r/static/js/alertify-config_0cc8db2",
  "r/bower_components/bootstrap/dist/js/bootstrap.min": "/server/r/bower_components/bootstrap/dist/js/bootstrap.min",
  "r/bower_components/metisMenu/dist/metisMenu.min": "/server/r/bower_components/metisMenu/dist/metisMenu.min",
  "r/bower_components/select2/dist/js/select2": "/server/r/bower_components/select2/dist/js/select2",
  "r/static/js/hxz/hxz.ui": "/server/r/static/js/hxz/hxz.ui_0a7714d",
  "r/static/js/hxz/hxz": "/server/r/static/js/hxz/hxz_589b155",
  "r/vendor/pagination/jquery.pagination": "/server/r/vendor/pagination/jquery.pagination",
  "r/bower_components/moment/min/moment-with-zh-cn.min": "/server/r/bower_components/moment/min/moment-with-zh-cn.min",
  "r/bower_components/jquery-qrcode/jquery.qrcode.min": "/server/r/bower_components/jquery-qrcode/jquery.qrcode.min",
  "r/bower_components/bootstrap-daterangepicker/daterangepicker": "/server/r/bower_components/bootstrap-daterangepicker/daterangepicker"
}});


  var pagination = false;
  require(["r/bower_components/jquery/dist/jquery.min", "r/static/js/hxz/hxz", "r/vendor/pagination/jquery.pagination", "r/bower_components/select2/dist/js/select2", "r/bower_components/bootstrap/dist/js/bootstrap.min", "r/static/js/alertify-config", "r/bower_components/moment/min/moment-with-zh-cn.min", "r/bower_components/jquery-qrcode/jquery.qrcode.min", "r/bower_components/bootstrap-daterangepicker/daterangepicker"], function ($, hxz, pagination, select2, bootstrap, alertify, moment) {
//    /settlement/list.json

    var filter = {};
    var $startDate = $('#start-date');
    var $startDateInput = $('#start-date input');
    var $startTime = $('#start-time');

    window.hxz = {};


    function fetchActivityList(page) {
      var settlementListUrl = hxz.RestApi.billRecordList;

      var option = {};
      if (!page) {
        option.page = 1;
      } else {
        option.page = page;
      }

      if (filter.time) {
        option.time = filter.time;
      }
      option.status = filter.status;
      hxz.doGet({url: hxz.getUrlByfiterOption(settlementListUrl, option)}, function (data) {
        if (data.status == "0") {
          return alertify.log("系统错误");
        }

        render(data.data.dataList, page, data.data.count);
      });
    }

    function render(dataList, page, count) {
      var tpl = _.template($('#tpl-activity-list-item').html());
      $("#activity-list-body").html("");
      for (var i = 0; i < dataList.length; i++) {
        var _data = dataList[i];
        _data.index = hxz.pageIndex(i, page);
        _data.billStatus = function (status) {
          //状态 0 下载失败 1处理中 2 对账成功 3 对账失败
          if(status == 0) {
            return "下载失败";
          } else if(status == 1) {
            return "处理中";
          } else if(status == 2) {
            return "对账成功";
          } else if(status == 3) {
            return "对账失败";
          } else if(status == 4) {
            return "不存在";
          }
        };

        _data.datetime = hxz.datetime;

        $("#activity-list-body").append(tpl(_data));
      }

      if (pagination) {
        pagination = false;
        $('#pagination').pagination(count, {
          current_page: 0,
          items_per_page: 10,
          num_display_entries: 6,
          callback: function (page_id) {
            //模拟ajax去后端读取页数，获取数据并渲染列表的过程
            fetchActivityList(page_id + 1);
          },
          load_first_page: false,
          prev_text: '上一页',
          next_text: '下一页'
        });
      }
    }

    function event() {

      moment.locale('zh-cn');
      var commDateConfig = {
        startDate: new Date(),
        locale: {
          format: 'YYYY年MM月DD日',
          separator: ' - ',
          applyLabel: '确定',
          cancelLabel: '关闭',
          weekLabel: 'W',
          customRangeLabel: 'Custom Range',
          daysOfWeek: moment.weekdaysMin(),
          monthNames: moment.monthsShort(),
          firstDay: moment.localeData().firstDayOfWeek()
        }
      };
      commDateConfig.singleDatePicker = true;

      $startDate.daterangepicker(commDateConfig, function (start, end, label) {
        $startDateInput.val(hxz.date(start));
        var sDate = new Date(start);
        $startTime.val(sDate.getTime());
      });
      var currentDate = new Date();
      $startDateInput.val(hxz.date(currentDate));
      $startTime.val(currentDate.getTime());


      $("#search").unbind("click").on("click", function () {
        filter.time = $startTime.val();
        pagination = true;
        fetchActivityList(1);
      });

      $("#play-filter-all").unbind("click").on("click", function () {
        filter = {};
        pagination = true;
        fetchActivityList(1);
      });

      $("#play-filter-0").unbind("click").on("click", function () {
        filter.status = 0;
        pagination = true;
        fetchActivityList(1);
      });
      $("#play-filter-1").unbind("click").on("click", function () {
        filter.status = 1;
        pagination = true;
        fetchActivityList(1);
      });
      $("#play-filter-2").unbind("click").on("click", function () {
        filter.status = 2;
        pagination = true;
        fetchActivityList(1);
      });
      $("#play-filter-3").unbind("click").on("click", function () {
        filter.status = 3;
        pagination = true;
        fetchActivityList(1);
      });
      $("#play-filter-4").unbind("click").on("click", function () {
        filter.status = 4;
        pagination = true;
        fetchActivityList(1);
      });


      $("#query-filter").unbind("click").on("click", function () {
        filter.activityId = $("#select-activity").val();
        filter.orgId = $("#select-org").val();
        filter.certificateId = $("#certificateId").val();
        pagination = true;
        fetchActivityList(1);
      });
    }

    pagination = true;
    fetchActivityList(1);
    event();
  });
</script>
</body>

</html>